<template>
	<div class="scroller-winners">
		<img class="scroller-winners__icon" src="@/assets/2/images/red-package.png" />

		<van-swipe style="height: 35px;" :width="75" :autoplay="3000" vertical :show-indicators="false" @change="onChange">
			<van-swipe-item v-for="(item, index) in list" :key="index">
				<div class="li">
					<p>{{ item.phone }}</p>
					<p>{{ item.text }}</p>
				</div>
			</van-swipe-item>
		</van-swipe>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { Swipe, SwipeItem } from 'vant';

export default {
	components: {
		'van-swipe': Swipe,
		'van-swipe-item': SwipeItem
	},

	data() {
		return {
			list: []
		};
	},

	computed: {
		...mapGetters(['bwbt_conf'])
	},

	watch: {
		bwbt_conf: {
			immediate: true,
			handler() {
				this.refresh();
			}
		}
	},

	methods: {
		refresh() {
			const sb = (this.bwbt_conf.subsidiesToday || '').split(',').map(e => Number(e));
			const min = Math.min.apply(this, sb);
			const max = Math.max.apply(this, sb);

			const rdn = n => {
				return parseInt(Math.random() * n);
			};
			const rd = () => {
				return {
					phone:
						['159', '173', '180', '181', '186', '189', '199', '134', '191', '153', '133', '176', '152', '187'][rdn(4)] +
						'****' +
						new Array(4)
							.fill(1)
							.map(() => rdn(9))
							.join(''),
					text: `抢到${parseFloat(Math.random() * 60 + 128).toFixed(2)}元红包`
				};
			};

			this.list = new Array(2).fill(1).map(e => {
				let { phone, text } = rd();
				return {
					phone,
					text
				};
			});
		},

		onChange(i) {
			if (i == 0) {
				setTimeout(() => {
					this.refresh();
				}, 300);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.scroller-winners {
	display: flex;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 100px;
	padding: 0 16px;
	width: 300rpx !important;

	&__icon {
		height: 46px;
		width: 46px;
		margin-right: 5px;
	}

	.van-swipe {
		height: 100rpx;
	}

	.li {
		color: #fff;
		font-size: 22px;
		transform: scale(0.9);
		overflow: hidden;
		height: 70px;
	}
}
</style>
